<template>
	<view style="padding:10px">
		<view>
			<u-form>
				<u-form-item label="日期:"  border-bottom="false" label-width="150" >
					<u-input v-model="formData.time" disabled="true" border="true"  />
				</u-form-item>
			</u-form>
			
			<map id="cqqkMap" ref="cqqkMap" class="map" 
			:latitude="formData.lat" 
			:longitude="formData.lng" 
			:markers="covers"
			:circles="circles"
			:show-location="true">
				<!-- <cover-image class="control" src="/static/map/location-fill.png" @click="controlclick">
					
				</cover-image> -->
			</map>
			<u-button :loading="loading"  @click="clockIn()" :disabled="submitBtn" type="primary">{{btnName}}</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	var appMap = null;
	export default {
		computed:mapState(['user', ]),
		data() {
			return{
				btnName:'签到',
				mapTimer:'',
				dateTimer:'',
				checkClockTimer:'',
				submitBtn:true,
				loading:false,
				cqqkMap:null,
				formData:{
					time: this.$util.getNowDT(),
					userId: '',
					location: '',
					lat: '',
					lng: '',
				},
				covers:[],
				circles:[]
			}
		},
		methods:{
			//是否已签到
			isClockIn(){
				this.loading = true;
				this.$http.post("/cqqk/isClockIn",this.formData).then(res=>{
					this.loading = false;
					let data = res.data.data;
					if(data){
						this.btnName = "今日已完成签到";
						clearInterval(this.mapTimer);
					}else{
						this.submitBtn = false;
					}
				}).catch(err => {
					this.loading = false;
					this.submitBtn = false;
					this.$refs.uToast.show({
						title: '签到失败，请检查网络！',
						type: 'error',
						back: true
					}) 
				})
			},
			clockIn(){
				this.submitBtn = true;
				this.loading = true;
				const that = this;
				if(!this.formData.lat||!this.formData.lng||!this.formData.location){
					this.$refs.uToast.show({
						title: '位置信息获取失败！',
						type: 'error'
					})
					return;
				}
				
				this.$http.post("/cqqk/clockIn",this.formData).then(res => {
					this.loading = false;
					let data = res.data.data;
					if(data){
						that.$refs.uToast.show({
							title: '签到成功',
							type: 'success',
							callback: ()=>{
								that.$u.route({
									type:'back',
									delta: 1
								})
							}
							//back: true
						})
					}else{
						this.submitBtn = false;
						this.$refs.uToast.show({
							title: '签到异常,请稍后重试',
							type: 'error'
						})
					}
				}).catch(err => {
					this.submitBtn = false;
					this.loading = false;
					this.$refs.uToast.show({
						title: '提交失败！',
						type: 'error'
					}) 
				})
				
				
			},
			controlclick(e){
				let obj  = {
					latitude:this.formData.lat,
					longitude:this.formData.lng
				}
				this.cqqkMap.moveToLocation(obj);
				//uni.openLocation(obj);
			},
			setLoaction(){
				let locations = this.$auth.getLocationInfo();
				if(this.cqqkMap){
					this.cqqkMap.getCenterLocation({success(res) {
						console.log(res);
					}})
				}
				this.formData.lat = locations.lat;
				this.formData.lng = locations.lng;
				this.formData.location = locations.address;
			},
			dateInterval(){
				this.formData.time = this.$util.getNowDT();
			},
			
		},
		onLoad() {
			this.formData.userId = this.user.user.id || '';
			this.isClockIn();
			//初始定位
			this.setLoaction();
			//实时定位
			this.mapTimer = setInterval(this.setLoaction,5000);
			this.dateTimer = setInterval(this.dateInterval,1000);
		},
		onReady() {
			this.cqqkMap = uni.createMapContext("cqqkMap",this);
			console.log(this.cqqkMap);
		},
		destroyed(){
			console.log("destory");
			clearInterval(this.mapTimer);
			clearInterval(this.dateTimer);
		}
	}
</script>

<style>
	.map{
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		width: 100%; 
		height: 500rpx;
	}
	.control{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		bottom: 25rpx;
		right: 25rpx;
	}
</style>
